import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';

import 'draw_under_line.dart';

typedef ConfirmCallback = void Function(String start, String end);

///
/// 时段选择器
///
class DeliveryPeriodPricker extends StatefulWidget {
  final ConfirmCallback? onConfirm;

  const DeliveryPeriodPricker({Key? key, this.onConfirm}) : super(key: key);

  @override
  State<DeliveryPeriodPricker> createState() => _DeliveryPeriodPrickerState();
}

class _DeliveryPeriodPrickerState extends State<DeliveryPeriodPricker> {
  late FixedExtentScrollController hhScrollController;

  late FixedExtentScrollController mmScrollController;

  bool isStart = true;

  String start = '';

  String end = '';

  int hIndex = 0;

  int mIndex = 0;

  @override
  void initState() {
    super.initState();
    var now = DateTime.now();
    hIndex = now.hour;
    mIndex = now.minute;
    String time = hIndex > 9 ? hIndex.toString() : '0$hIndex';
    time += ':${mIndex > 9 ? mIndex.toString() : '0$mIndex'}';
    start = time;
    hhScrollController = FixedExtentScrollController(initialItem: hIndex);
    mmScrollController = FixedExtentScrollController(initialItem: mIndex);
  }

  @override
  void dispose() {
    super.dispose();
    hhScrollController.dispose();
    mmScrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(Sizes.default15), topRight: Radius.circular(Sizes.default15)),
      ),
      child: Column(
        children: [
          Container(
            height: Sizes.default50,
            alignment: Alignment.centerLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('取消',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default16, color: ColorsUtils.color333))),
                TextButton(
                    onPressed: () {
                      widget.onConfirm!(start, end);
                      Navigator.pop(context);
                    },
                    child: Text('确定',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default16, color: ColorsUtils.colorFf6)))
              ],
            ),
          ),
          Container(
            height: Sizes.default50,
            alignment: Alignment.centerLeft,
            child: Row(
              children: [
                Expanded(
                    flex: 5,
                    child: InkWell(
                      child: DrawUnderLine(
                        color: isStart
                            ? ColorsUtils.parseColorFromHexString(ColorsUtils.color333)
                            : ColorsUtils.parseColorFromHexString(ColorsUtils.colorCcc),
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            start,
                            style: StylesUtils.customTextStyle(
                                color: isStart ? ColorsUtils.color333 : ColorsUtils.color797,
                                fontSize: Sizes.default18),
                          ),
                        ),
                      ),
                      onTap: () {
                        changeStart();
                      },
                    )),
                Expanded(
                  flex: 3,
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                    alignment: Alignment.center,
                    child: Text(
                      '至',
                      style: StylesUtils.customTextStyle(color: '#515151'),
                    ),
                  ),
                ),
                Expanded(
                    flex: 5,
                    child: InkWell(
                      onTap: () {
                        changeStart(false);
                      },
                      child: DrawUnderLine(
                        color: !isStart
                            ? ColorsUtils.parseColorFromHexString(ColorsUtils.color333)
                            : ColorsUtils.parseColorFromHexString(ColorsUtils.colorCcc),
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            end,
                            style: StylesUtils.customTextStyle(
                                color: !isStart ? ColorsUtils.color333 : ColorsUtils.color797,
                                fontSize: Sizes.default18),
                          ),
                        ),
                      ),
                    )),
              ],
            ),
          ),
          Expanded(
            child: contentView(),
          )
        ],
      ),
    );
  }

  Widget contentView() {
    return Row(
      children: [
        Expanded(
            child: CupertinoPicker.builder(
                itemExtent: Sizes.default50,
                scrollController: hhScrollController,
                childCount: 24,
                backgroundColor: Colors.transparent,
                diameterRatio: 1,
                selectionOverlay: selectionOverlayWidget(),
                onSelectedItemChanged: (int index) {
                  setState(() {
                    hIndex = index;
                    String time = index > 9 ? index.toString() : '0$index';
                    time += ':${mIndex > 9 ? mIndex.toString() : '0$mIndex'}';
                    if (isStart) {
                      start = time;
                    } else {
                      end = time;
                    }
                  });
                },
                itemBuilder: (context, index) {
                  return hIndex == index
                      ? Container(
                          alignment: Alignment.center,
                          child: Text.rich(TextSpan(children: [
                            TextSpan(
                                text: '${index > 9 ? index : '0$index'}',
                                style: StylesUtils.customTextStyle(
                                    color: '#363636', fontSize: Sizes.default25)),
                            TextSpan(
                                text: '时', style: StylesUtils.customTextStyle(color: '#363636'))
                          ])),
                        )
                      : Container(
                          padding: const EdgeInsets.only(right: Sizes.default20),
                          alignment: Alignment.center,
                          child: Text(
                            '${index > 9 ? index : '0$index'}',
                            style: StylesUtils.customTextStyle(
                                fontSize: Sizes.default20, color: '#A1A1A1'),
                          ),
                        );
                })),
        Expanded(
            child: CupertinoPicker.builder(
                scrollController: mmScrollController,
                itemExtent: Sizes.default50,
                childCount: 60,
                diameterRatio: 1,
                backgroundColor: Colors.transparent,
                selectionOverlay: selectionOverlayWidget(),
                onSelectedItemChanged: (int index) {
                  setState(() {
                    mIndex = index;
                    String time = hIndex > 9 ? hIndex.toString() : '0$hIndex';
                    time += ':${mIndex > 9 ? mIndex.toString() : '0$mIndex'}';
                    if (isStart) {
                      start = time;
                    } else {
                      end = time;
                    }
                  });
                },
                itemBuilder: (context, index) {
                  return mIndex == index
                      ? Container(
                          alignment: Alignment.center,
                          child: Text.rich(TextSpan(children: [
                            TextSpan(
                                text: '${index > 9 ? index : '0$index'}',
                                style: StylesUtils.customTextStyle(
                                    color: '#363636', fontSize: Sizes.default25)),
                            TextSpan(
                                text: '分', style: StylesUtils.customTextStyle(color: '#363636'))
                          ])),
                        )
                      : Container(
                          padding: const EdgeInsets.only(right: Sizes.default20),
                          alignment: Alignment.center,
                          child: Text(
                            '${index > 9 ? index : '0$index'}',
                            style: StylesUtils.customTextStyle(
                                fontSize: Sizes.default20, color: '#A1A1A1'),
                          ),
                        );
                }))
      ],
    );
  }

  /// 中间分割线
  Widget selectionOverlayWidget() {
    return Padding(
      padding: const EdgeInsets.only(left: 0, right: 0),
      child: Column(
        children: [
          Divider(
            height: 1,
            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCcc),
          ),
          Expanded(child: Container()),
          Divider(
            height: 1,
            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCcc),
          ),
        ],
      ),
    );
  }

  void changeStart([bool start = true]) {
    setState(() {
      isStart = start;
    });
  }
}
